<template>
	<!-- 首页搜索输入完以后点击搜索后的界面 -->
	<view class="page">
		<!-- 搜索 -->
		<view class="search-head">
			<view class="back" @click="onBack">
				<text></text>
			</view>
			<view class="search">
				<text class="iconfont icon-fadajing"></text>
				<input type="text" v-model="keyword" placeholder="搜索商品" />
			</view>
			<view class="cut" @click="isList = !isList">
				<text class="iconfont" :class="isList?'icon-shitu01':'icon-shitu02'"></text>
			</view>
		</view>
		<!-- 筛选 -->
		<view class="screen-info">
			<!-- <view class="screen-list">
				<view class="list" :class="{'action':screenShow===0}" @click="onSynthesize(0)">
					<text>{{title}}</text>
					<text class="iconfont icon-sanjiao icon_z"></text>
				</view>
				<view class="list">
					<text>价格</text>
					<view class="icon_j">
						<text class="iconfont icon-sanjiao up"></text>
						<text class="iconfont icon-sanjiao down"></text>
					</view>
				</view>
				<view class="list">
					<text></text>
					<text></text>
				</view>
				<view class="list" @click="isDrawer = true">
					<text>筛选</text>
					<text class="iconfont icon-shaixuan icon_s"></text>
				</view>
			</view> -->
			<!-- 筛选弹窗 -->
			<!-- <view style="margin-top: -10px;" class="screen-popup" @click.stop="isScreen = false" v-show="isScreen">
				<view class="synthesize">
					<view class="list" @click="screen(1)">
						<span v-if="title=='综合排序'">
							<text class="check"></text>
						</span>
						<text id="" class="title">综合排序</text>
					</view>
					<view class="list" @click="screen(2)">
						<span v-if="title=='最低价格'">
							<text class="check"></text>
						</span>
						<text class="title">最低价格</text>
					</view>
					<view class="list" @click="screen(3)">
						<span v-if="title=='最高价格'">
							<text class="check"></text>
						</span>
						<text class="title">最高价格</text>
					</view>

				</view>
			</view> -->
		</view>
		<!-- 商品列表 -->
		<view class="goods-data">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption" :top="0">
				<view class="goods-list">
					<view :class="isList?'list-view':'list-li'" v-for="(item,index) in goodsList" @click="onGoodsList(item.goodsId,item.goodsPrice,item.activityPrice,item.test,item.goodsInfo,item.num,item.img,item.goodsName)"
						:key="index">
						<view class="thumb">
							<image :src="ip+item.img" mode="heightFix"></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">{{item.goodsName}}</text>
							</view>
							<view class="price">
								<view class="retail-price">
									<text class="min">￥</text>
									<text class="max">{{item.goodsPrice}}</text>
									<view class="tag" v-if="item.offer === 15">
										<text>特价</text>
									</view>
								</view>
								<view class="vip-price">
									<text class="min">￥</text>
									<text class="max">{{item.activityPrice}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<!-- 抽屉 -->
		<view class="cu-modal drawer-modal justify-end" :class="{'show':isDrawer}" @click="isDrawer = false"
			style="position: absolute;">
			<view class="cu-dialog basis-lg" @click.stop="isDrawer = true">
				<view class="serve">
					<!-- <view class="title">
						<text>服务</text>
					</view>
					<view class="serve-list">
						<view class="list action">
							<text>会员专享</text>
						</view>
						<view class="list">
							<text>活动</text>
						</view>
						<view class="list">
							<text>活动</text>
						</view>
					</view> -->
				</view>
				<!-- <view class="price-screen">
					<view class="title">
						<text>价格区间</text>
					</view>
					<view class="price-section">
						<input type="number" placeholder="最低价">
						<text></text>
						<input type="number" placeholder="最高价">
					</view>
				</view>
				<view class="operation-btn">
					<view class="btn" @click.stop="isDrawer = false">
						<text>取消</text>
					</view>
					<view class="btn action">
						<text>确认</text>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {baseUrl} from '@/config/baseUrl.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				ip:"http://43.142.173.112:9090/images/",
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {},
				// 列表视图切换
				isList: true,
				// 筛选弹窗
				isScreen: false,
				// 筛选切换
				screenShow: 0,
				// 抽屉
				isDrawer: false,
				keyword: '',
				title: '综合排序',
				goodsList: [],
			}
		},
		onLoad(params) {
			let shopsId = uni.getStorageSync("shopsId")
			if(params.oneTypeId==null || params.oneTypeId==""){
				this.keyword = decodeURIComponent(params.keyword || '');
				uni.request({
					// 192.168.2.111 本机ip  localhost
					url: baseUrl + "/index/search",
					method: 'POST',
					data: {
						shopsId: shopsId,
						goodsName: this.keyword
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						if (res.data.goodsList.length > 0) {
							this.goodsList = res.data.goodsList;
						}
					}
				})
			}else{
				uni.request({
					url:  baseUrl+"/index/getGoodsOneTypeLook",
					method: 'POST',
					data: {
						oneTypeId:params.oneTypeId,
						shopsId:shopsId,
					},
					header:{ "Content-Type": "application/x-www-form-urlencoded"},
					success: (res) => {
						console.log(res);
						if (res.data.goodsList.length > 0) {
							this.goodsList = res.data.goodsList;
							console.log("商品列表",this.goodsList)
						}
					}
				})
			}
			
		},
		methods: {
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() => {
					this.mescroll.endByPage(10, 20);
				}, 2000)
			},
			/**
			 * 返回点击
			 */
			onBack() {
				uni.navigateBack();
			},
			/**
			 * 综合点击
			 * @param {Number} type
			 */
			onSynthesize(type) {
				this.screenShow = type;
				this.isScreen = !this.isScreen;
			},
			/**
			 * 商品列表点击
			 */
			onGoodsList(goodsId,goodsPrice,activityPrice,test,goodsInfo,num,img,goodsName) {
				uni.navigateTo({
					url: '/pages/GoodsDetails/GoodsDetails?goodsId='+goodsId+'&goodsPrice='+goodsPrice+'&activityPrice='+activityPrice+'&test='+test+'&goodsInfo='+goodsInfo+'&num='+num+'&img='+img+'&goodsName='+goodsName,
					animationType: 'zoom-fade-out',
					animationDuration: 200,
				})
			},
			screen(item) {
				switch (item) {
					case '1':
						this.title = '综合排序'
						break;
					case '2':
						this.title = '最低价格'
						break;
					case '3':
						this.title = '最高价格'
						break
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'SearchGoodsList.scss';
</style>
